'use client';

import { useEffect } from 'react';
import { useGlobalState } from '../context/GlobalStateContext';
import '../globals.css';

// 扩展Window接口以包含counterDemo属性
declare global {
  interface Window {
    counterDemo?: {
      counter: number;
      setCounter: (count: number) => void;
    };
  }
}

export default function Counter() {
  const { state, updateCounter } = useGlobalState();
  const { count } = state.counter;

  // 在控制台暴露状态以便验证
  useEffect(() => {
    window.counterDemo = {
      counter: count,
      setCounter: updateCounter
    };
    
    console.log('计数器示例已加载。使用 window.counterDemo 对象进行控制台验证。');
    console.log('可验证的属性和方法：counter, setCounter');
  }, [count, updateCounter]);

  return (
    <div className="container">
      <h1>计数器示例</h1>
      <p>React的useState Hook提供了响应式状态管理：</p>
      
      <div className="counter-container">
        <button onClick={() => updateCounter(count - 1)}>-</button>
        <span>{count}</span>
        <button onClick={() => updateCounter(count + 1)}>+</button>
      </div>
      
      <div className="instructions">
        <h3>控制台验证说明：</h3>
        <p>1. 点击"+"或"-"按钮改变计数器值</p>
        <p>2. 打开浏览器控制台，输入 <code>window.counterDemo.counter</code> 查看当前值</p>
        <p>3. 在控制台中输入 <code>window.counterDemo.setCounter(10)</code> 设置计数器值为10</p>
        <p>4. 观察页面上的计数器自动更新</p>
      </div>
      
      <div className="advantages">
        <h3>React 状态管理的优势</h3>
        <ul>
          <li>使用useState Hook管理状态，代码简洁</li>
          <li>状态变化自动触发组件重新渲染</li>
          <li>组件内部状态封装，避免全局状态污染</li>
          <li>支持复杂状态逻辑，可通过useReducer扩展</li>
        </ul>
      </div>
    </div>
  );
}